<template>
  <div class="address-add">
    <x-header v-if="!this.$fromApp(this)" :left-options="{backText: ''}" class="whiteTheme">
      <span>添加地址</span>
    </x-header>
    <div class="input-wrap">
      <group>
        <x-input title="收货人：" v-model.trim="name.value" @on-change="inputName" name="username" placeholder="请输入收货人姓名"></x-input>
      </group>
      <group>
        <x-input title="电话号码：" ref="phone" v-model.trim="phone.number" @on-change="checkPhone" name="phone" placeholder="请输入11位电话号码" keyboard="number" :max="11" :is-type="checkPhone"></x-input>
      </group>
      <group>
        <x-input title="收货地址：" v-model.trim="address.value" @on-change="inputAddress" name="address" placeholder="请输入详细收货地址"></x-input>
      </group>

      <x-button class="save-btn" @click.native="save" plain type="primary" :disabled="name.valid&&phone.valid&&address.valid?false:true">保存收货地址</x-button>
    </div>
  </div>
</template>
<script src="./addressAdd.js"></script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  /deep/ .weui-icon-clear{
    display: none;
    background-color: transparent;
  }
  .address-add{
    background-color: #fff;
    position: absolute;
    width:100%;
    height: 100%;
    .input-wrap{
      padding: 0.4rem 0.4rem;
    }
    /deep/ .weui-cells{
      margin-top: 0;
      font-size: 0.32rem;
      .weui-cell{
        padding: 0.4rem 0rem;
      }
      .weui-input{
        color: #333;
        font-size: 0.3rem;
      }
    }
    /deep/ .weui-cells:before{
      display: none;
    }
    /deep/ .weui-cells:after{
      border-bottom: 1px solid #ebebeb;
    }
    .save-btn{
      margin-top:1.2rem;
      border-radius: 1rem;
      font-size: 0.34rem;
      color: #fff;
      background-color: #527DD9;
      border-color: #527DD9
    }
    .save-btn.weui-btn_plain-disabled{
      opacity: 0.5;
    }
    /deep/ input::-webkit-input-placeholder {
      color: #ddd;
      font-size: 0.3rem;
    }
    /deep/ input:-moz-placeholder {
      color: #ddd;
      font-size: 0.3rem;
    }
    /deep/ input:-ms-input-placeholder {
      color: #ddd;
      font-size: 0.3rem;
    }
  }
</style>
